@import '~styles/config.scss';
::-webkit-scrollbar {
    width: 0;
}

.platformlist {
    .li {
        border-radius: 4px;
        display      : flex;
        margin-top   : 20px;
        cursor       : pointer;
        padding      : 14px 14px;
        line-height  : 30px;
        border       : 1px solid $--border-color-lighter;

        &.true {
            border-color: $--color-primary;
            background  : $--color-primary;
            color       : #fff;

            .select {
                display: block;
            }
        }

        &:first-of-type {
            margin-top: 0px;
        }

        .name {
            flex : none;
            width: 100px;
        }

        .mobile {
            flex: auto
        }

        .select {
            display  : none;
            font-size: 20px;
            flex     : none;
        }
    }
}

.container_base {
    width    : 100vw;
    height   : 100vh;
    min-width: 1100px;
    display  : flex;
}

.container_base_hh {
    height       : $layoutTopHeight;
    box-sizing   : border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03)
}

.container_base_mm {
    width     : 100%;
    box-sizing: border-box;
    height    : calc(100vh - 1px - #{$layoutTopHeight});
    overflow  : hidden;
    overflow-y: auto;

}

.container_base_module {
    width     : 66px;
    height    : 100vh;
    background: #192432;


    position: relative;
    z-index : 2;
    flex    : none;

    .logo {
        height         : $layoutTopHeight;
        width          : 100%;
        display        : flex;
        justify-content: center;
        align-items    : center;

        color: #fff;

        img {
            object-fit: contain;
            width     : 50%;
            height    : 50%;
            display   : block;
        }
    }

    .container_base_hh {
        border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    .ul {
        padding: 10px 0px;
    }

    .li {

        color     : #757993;
        padding   : 10px 0px;
        display   : block;
        cursor    : pointer;
        text-align: center;

        &.true,
        &:hover {
            color     : rgba(255, 255, 255, 1);
            background: rgba(0, 0, 0, 0.2);
        }
    }

    .icon {
        font-size: 24px;
    }

    .t {
        padding-top: 5px;
        font-size  : 12px;
        line-height: 20px;
    }
}

.container_base_menu {

    width : 160px;
    height: 100vh;

    position    : relative;
    z-index     : 1;
    flex        : none;
    background  : $--background-color-base;
    border-right: 1px solid $--border-color-lighter;
    box-shadow  : 0px 0px 20px inset rgba(0, 0, 0, 0.05);


    .name {
        width      : 100%;
        height     : 100%;
        display    : flex;
        align-items: center;
        box-sizing : border-box;
        padding    : 0px 20px;
        font-size  : 18px;
        color      : $--color-text-primary;
    }

    // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03);
    .ul {
        // padding: 0px 15px 0px 15px;

    }

    .li {

        display: block;

        padding : 10px 0px;
        position: relative;

        &::before {
            content   : "";
            z-index   : 1;
            position  : absolute;
            top       : 0px;
            left      : 0px;
            width     : calc(100% - 0px);
            height    : 1px;
            background: rgba(0, 0, 0, 0.04);
        }

        &:first-child {
            &::before {
                display: none;
            }
        }
    }

    .head {
        line-height   : 50px;
        color         : $--color-text-primary;
        // font-weight: bold;
        font-size     : 14px;
        padding       : 0px 20px;
    }

    .sub {
        // margin-top   : 4px;
        line-height     : 40px;
        display         : block;
        font-size       : 12px;
        color           : $--color-text-regular;
        padding         : 0px 20px;
        // border-radius: 5px;
        cursor          : pointer;
        position        : relative;

        &::after {
            content   : "";
            position  : absolute;
            top       : 50%;
            left      : 10px;
            width     : 2px;
            height    : 12px;
            margin-top: -6px;
            background: $--color-primary;

            border-radius: 10px;
            transition   : all .3s;
            opacity      : 0;
            transform    : translateX(-3px);
        }

        &.router-link-active,
        &:hover {
            // background         : $--background-color-light;
            background         : rgba(0, 0, 0, 0.03);
            color              : $--color-text-primary;
            // background-image: linear-gradient(187deg, #3E4192 0%, #5D62C0 100%);

            &::after {
                height    : 12px;
                margin-top: -6px;
                transform : translateX(0px);
                opacity   : 1;
            }

        }

        &:hover {
            &::after {
                background: $--color-success;
            }
        }

        &.router-link-active {

            box-shadow : 0px 0px 20px inset rgba(0, 0, 0, 0.03);
            font-weight: bold;

            // background-image: linear-gradient(187deg, #3E4192 0%, #5D62C0 100%);
            &::after {
                height    : 8px;
                margin-top: -4px;
            }
        }

    }
}

.container_base_container {
    flex      : auto;
    overflow  : hidden;
    height    : 100vh;
    background: #fff;
    background: $--background-color-base;

    .container_base_hh {
        padding    : 0px 16px;
        display    : flex;
        align-items: center;
        .all-app {
            width:fit-content;
           

        }
        .title {
            font-size: 18px;
            flex     : auto;
            color    : $--color-text-primary;
        }

        .fn {
            flex      : none;
            display   : flex;
            text-align: right;

            .face {
                border       : 1px solid rgba(0, 0, 0, 0.1);
                width        : 30px;
                height       : 30px;
                border-radius: 100%;
                overflow     : hidden;

                img {
                    width  : 100%;
                    height : 100%;
                    display: block;
                }
            }

            .name {
                line-height: 30px;
                padding    : 0px 10px;
                font-size  : 12px;
                color      : $--color-text-regular;
            }
        }

    }

    .container_base_mm {
        // padding: 14px;
        
    }
}


.container_base_help {
    border-left: 1px solid $--border-color-lighter;
    width      : 240px;
    flex       : none;
    overflow   : hidden;
    height     : 100vh;
    background : #fff;
    background : $--background-color-base;
    box-shadow : 0px 0px 20px inset rgba(0, 0, 0, 0.05);


    .name {
        width      : 100%;
        height     : 100%;
        display    : flex;
        align-items: center;
        box-sizing : border-box;
        padding    : 0px 14px;
        font-size  : 14px;
        color      : $--color-text-regular;

        i {
            font-size   : 16px;
            margin-right: 4px;
        }
    }

    .ul {
        padding: 6px 14px 14px 14px;
    }

    .li {
        background : #fff;
        margin-top : 8px;
        padding    : 10px 14px;
        cursor     : pointer;
        line-height: 24px;
        border     : 1px solid $--border-color-lighter;
        transition : all .5s;
        opacity: .7;

        .title {
            font-size: 14px;
            text-align: justify;
            transition: all .5s;
        }

        .des {
            color             : $--color-text-secondary;
            margin-top        : 5px;
            font-size         : 12px;
            // transition        : all .5s;
            word-break        : break-all;
            text-overflow     : ellipsis;
            display           : -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 这里是超出几行省略 */
            overflow          : hidden;
            text-align: justify;
            

        }

        &:hover {
            opacity: 1;
            border-color: $--color-primary;
            background  : $--background-color-primary-light;

            .title {
                color: $--color-primary;
            }
            .des{
                -webkit-line-clamp: 20;
            }

        }
    }
}